<template>
  <div>
    <van-nav-bar title="订单详情" left-arrow @click-left="GOback" fixed :border="false" placeholder />
    <section class="order_titel">
      <img :src="'//elm.cangdu.org/img/'+OrdersData[indexData].restaurant_image_url" alt="">
      <p>支付超时</p>
      <a class="order_again" href="javascript:;" @click="Details(OrdersData[indexData].restaurant_id)">再来一单</a>
    </section>
    <section class="food_list">
      <a href="javascript:;" class="food_list_header" @click="Details(OrdersData[indexData].restaurant_id)">
        <div class="shop_name">
          <img :src="'//elm.cangdu.org/img/'+OrdersData[indexData].restaurant_image_url" alt="">
          <span>{{OrdersData[indexData].restaurant_name}}</span>
        </div>
        <van-icon name="arrow" color="#bbbbbb" />
      </a>
      <ul class="food_list_ul">
        <li v-for="(item,index) in OrdersData[indexData].basket.group[0]" :key="index">
          <p class="food_name">{{item.name}}</p>
          <div class="quantity_price">
            <span>X{{item.quantity}}</span>
            <span>¥{{item.price}}</span>
          </div>
        </li>
      </ul>
      <div class="deliver_fee">
        <span>{{OrdersData[indexData].basket.deliver_fee.name}}</span>
        <span>{{OrdersData[indexData].basket.deliver_fee.price}}</span>
      </div>
      <div class="deliver_fee">
        <span>{{OrdersData[indexData].basket.packing_fee.name}}</span>
        <span>{{OrdersData[indexData].basket.packing_fee.price}}</span>
      </div>
      <div class="pay_ment">实付{{OrdersData[indexData].total_amount}}.00</div>
    </section>
    <!-- 配送信息 -->
    <section class="order_detail_style">
      <header>配送信息</header>
      <section class="item_style">
        <p class="item_left">送达时间：</p>
        <div class="item_right">
          <p></p>
        </div>
      </section>
      <section class="item_style">
        <p class="item_left">送货地址：</p>
        <div class="item_right">
          <p></p>
        </div>
      </section>
      <section class="item_style">
        <p class="item_left">配送方式：</p>
        <div class="item_right">
          <p>蜂鸟专送</p>
        </div>
      </section>
    </section>
    <!-- 订单信息 -->
    <section class="order_detail_style">
      <header>订单信息</header>
      <section class="item_style">
        <p class="item_left">订单号：</p>
        <div class="item_right">
          <p>{{OrdersData[indexData].unique_id}}</p>
        </div>
      </section>
      <section class="item_style">
        <p class="item_left">支付方式：</p>
        <div class="item_right">
          <p>在线支付</p>
        </div>
      </section>
      <section class="item_style">
        <p class="item_left">下单时间：</p>
        <div class="item_right">
          <p>{{OrdersData[indexData].formatted_created_at}}</p>
        </div>
      </section>
    </section>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['OrdersData', 'indexData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    Details(id) {
      window.sessionStorage.setItem('shopid', id)
      this.$router.push('/Details')
    }
  },
  mounted() {
    this.$store.dispatch('GetOrders', window.sessionStorage.getItem('user_id'))
  }
}
</script>

<style lang="less" scoped>
.order_titel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem;
  background-color: #fff;
  margin-bottom: 0.5rem;
  img {
    border: 0.05rem solid #3190e8;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
  }
  p {
    font-size: 0.85rem;
    color: #333;
    font-weight: 700;
    margin-top: 0.4rem;
  }
}
.order_again {
  font-size: 0.55rem;
  color: #3190e8;
  margin-top: 0.5rem;
  border: 0.025rem solid #3190e8;
  padding: 0.15rem 0.4rem;
  border-radius: 0.1rem;
}
.food_list {
  background-color: #fff;
  .food_list_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid #f5f5f5;
    .shop_name {
      img {
        width: 1.2rem;
        height: 1.2rem;
        vertical-align: middle;
        margin-right: 0.2rem;
      }
      span {
        font-size: 0.7rem;
        color: #333;
        font-weight: 700;
      }
    }
  }
  .food_list_ul {
    li {
      .food_name {
        font-size: 0.6rem;
        color: #666;
        flex: 4;
      }
      .quantity_price {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:first-of-type {
          font-size: 0.6rem;
          color: #ccc;
        }
        span:nth-of-type(2) {
          font-size: 0.6rem;
          color: #666;
        }
      }
    }
  }
}
.deliver_fee,
.food_list_ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
  line-height: 2rem;
}
.deliver_fee {
  border-top: 1px solid #f5f5f5;
  span {
    font-size: 0.6rem;
    color: #666;
  }
}
.pay_ment {
  font-size: 0.6rem;
  color: #fb6b23;
  border-top: 1px solid #f5f5f5;
  font-weight: 700;
  line-height: 2rem;
  text-align: right;
  padding-right: 0.5rem;
}
.order_detail_style {
  background-color: #fff;
  margin-top: 0.5rem;
  .item_style {
    display: flex;
    padding: 0.5rem;
    align-items: center;
    .item_left {
      font-size: 0.65rem;
      color: #666;
      line-height: 1rem;
    }
    .item_right {
      p {
        font-size: 0.6rem;
        color: #666;
        line-height: 1rem;
      }
    }
  }
  header {
    font-size: 0.7rem;
    color: #333;
    padding: 0.5rem;
    border-bottom: 1px solid #f5f5f5;
  }
}
</style>